@charset "UTF-8";

@import url(https://db.onlinewebfonts.com/c/69bed3a8aa634e734859ad564c6fd73c?family=ITC+Machine);

@font-face {
    font-family: "ITC Machine";
    src: url("https://db.onlinewebfonts.com/t/69bed3a8aa634e734859ad564c6fd73c.eot");
    src: url("https://db.onlinewebfonts.com/t/69bed3a8aa634e734859ad564c6fd73c.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/69bed3a8aa634e734859ad564c6fd73c.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/69bed3a8aa634e734859ad564c6fd73c.woff") format("woff"), url("https://db.onlinewebfonts.com/t/69bed3a8aa634e734859ad564c6fd73c.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/69bed3a8aa634e734859ad564c6fd73c.svg#ITC Machine") format("svg");
}

body {
    margin: -20px auto 0;
}

img {
    width: 100%;
}

main p {
    color: #fff;
}

.camera-systems,
.global-shutter,
.compact-form,
.robust,
.lens-mount,
.accessories,
.specifications,
.specifications-sp {
    background-color: #000;
}

.komodo-x__section-title {
    color: #fff;
    font-size: 2.3em;
    font-family: 'ITC Machine', sans-serif;
    text-align: center;
    letter-spacing: 0.02em;
    transform: scale(1.7, 1);
    font-weight: normal;
    margin: 0;
    padding: 20px 0 40px;
}

.footer {
    margin-top: 0 !important;
}

@media screen and (max-width: 600px) {
    .komodo-x__section-title {
        font-size: 1.4em;
    }

    .komodo-x__section-title span {
        display: inline-block;
    }

}

/* -------- top-sec -------- */
.top-sec {
    position: relative;
    width: 100%;
}

.kv {
    /* padding: 17vh 0; */
    padding: 200px 0 125px;
    justify-content: center;
}

.kv figure {
    margin: 0 auto;
}

.kv .kv-skull {
    width: 180px;
    margin-bottom: 20px;
}

.kv .kv-title {
    width: 500px;
}

.kv span,
.section-main-text span {
    display: inline-block;
    padding-right: 5px;
}

.top-sec h1 {
    text-align: center;
    padding-bottom: 45px;
}

.main-title {
    color: #fff;
    font-size: 3em;
    font-family: 'ITC Machine', sans-serif;
    text-align: center;
    letter-spacing: 0.02em;
    transform: scale(1.7, 1);
    font-weight: normal;
}

.top-sec p {
    max-width: 900px;
    margin: 0 auto 10px;
    text-align: center;
}

.video-area {
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
}

.video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 0;
    transform: none;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    /*縦横幅指定*/
    /* width: 177.77777778vh; */
    /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    /* height: 56.25vw; */
    /* 16:9の幅 → 9 ÷ 16 = 56.25% */
}

@media screen and (max-width: 1700px) {
    .kv {
        padding: 80px 0 150px;
    }
}


@media screen and (max-width: 600px) {
    .video {
        width: 261vw;
    transform: translate(-10%, -25%);
    left: -59%;
    top: 130px;
    }

    .kv {
        padding: 40% 0px ;
    }

    .kv .kv-title {
        width: 80%;
    }

    .kv figure {
        display: none;
    }

    .top-sec p {
        max-width: 100%;
        padding: 0 10px;
    }

    .sp-display-none {
        display: none;
    }

    .top-sec h1 {
        text-align: center;
        padding-bottom: 0px;
    }
    .main-title {
    font-size: 1.3em;
    }
}

/* -------- camera-systems -------- */
.camera-systems,
.global-shutter,
.accessories,
.specifications {
    padding: 80px 0;
}

.camera-systems h3,
.global-shutter h3 {
    color: #fff;
    font-size: 1.5em;
    font-family: 'ITC Machine', sans-serif;
    text-align: center;
    letter-spacing: 0.02em;
    font-weight: normal;
}



.section-main-text {
    max-width: 900px;
    text-align: center;
    margin: 0 auto 10px;
}

.camera-systems__flexbox,
.accessories__flexbox {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    justify-content: space-around;
    flex-wrap: wrap;
}

.camera-systems__flexbox li,
.accessories__flexbox li {
    padding: 20px;
    position: relative;
    list-style-type: none;
    margin: auto;
    width:44%;
}

.camera-systems__flexbox figure {
    margin: 0 auto;
}

.camera-systems__flexbox p,
.accessories__flexbox p {
    text-align: center;
    font-size: 0.85em;
}

.camera-systems__flexbox a,
.accessories__flexbox a,
.accessories__flexbox {
    color: #fff;
}

.camera-systems__flexbox a:hover,
.accessories__flexbox a:hover {
    color: #c0bfbf;
}

.new-tag {
    position: absolute;
    top: 18px;
    left: 245px;
    width: 100%;
    max-width: 384px;
    margin: 60px auto;
    aspect-ratio: 16/9;
}

.new-tag::before {
    content: "SALE!";
    background-color: #EA5504;
    padding: 2px 15px;
    color: #fff;
    font-weight: bold;
}

/*きらっと光る*/

.btnshine {
    /*キラッと光る基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
}

/*キラッと光る*/
.btnshine::before {
    content: '';
    /*絶対配置でキラッと光るの位置を決める*/
    position: absolute;
    top: 0;
    left: -75%;
    /*キラッと光る形状*/
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.btnshine:hover::before {
    animation: shine 0.7s;
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

.camera-systems__flexbox img:hover,
.accessories__flexbox img:hover {
    filter: drop-shadow(0 0 12px #777);
}

.camera-systems__btn{
    margin: 40px auto 0;
    width: 30%;
    max-width: 100%;
    border: 1px solid #fff;
    text-align: center;
}
.camera-systems__btn:hover {
    background-color: #fff;
}


.camera-systems__btn a {
    text-decoration: none;
    color: #fff;
}
.camera-systems__btn p:hover {
    color: #000;
}

.btn-content {
    padding: 20px;
    margin: 0;
}
.btn-content:hover {
    color:#000;
}

@media screen and (max-width: 1200px) {

    .camera-systems__flexbox,
    .accessories__flexbox {
        max-width: 1000px;
    }

    .camera-systems__flexbox figure {
    }
}

@media screen and (max-width: 1000px) {
    .btnshine {
    }

    .new-tag {
        left: 200px;
    }

    .section-main-text {
        max-width: 750px;
    }

    .new-tag::before {
        padding: 1px 10px;
    }
}

@media screen and (max-width: 850px) {
    .new-tag {
        left: 180px;
    }

    .new-tag::before {
        padding: 1px 7px;
    }
}

@media screen and (max-width: 750px) {
    .new-tag {
        left: 150px;
        top: 113px;
    }

    .new-tag::before {
        padding: 0 5px;
    }

    .new-tag::before {
        font-size: 0.9em;
    }
}

@media screen and (max-width: 600px) {
    .camera-systems__flexbox figure {
        width: 100%;
    }

    .camera-systems__flexbox,
    .accessories__flexbox {
        max-width: 100%;
    }

    .accessories__flexbox li {
        width: 39%;
    }

    .new-tag {
        left: 70%;
        top: -15px;
        width: 100%;
        max-width: 100%;
    }

    .camera-systems__flexbox {
        display: block;
    }

    .section-main-text {
        padding: 0 10px;
    }

    .camera-systems__flexbox li,
    .accessories__flexbox li {
        margin:auto;
        padding: 0;
        width: 48%;
    }

    .camera-systems__flexbox p {
        padding: 10px;
        margin: 0 auto;
    }

    .camera-systems h3,
    .global-shutter h3 {
        font-size: 1.2em;
    }

    .camera-systems h3 {
        margin: 0 auto;
    }

    .pc-display-none {
        display: block;
    }
    .camera-systems__btn {
        width: 75%;
        margin: 60px auto 0;
    }
    .btn-content {
        padding: 5px;
    }
    .camera-systems__btn:visited {
        background-color: #fff;
    }
    
    .camera-systems__btn a:visited {
        color: #000;
    }

}

/* -------- global-shutter -------- */
.global-shutter-wrap {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr;
    justify-content: space-around;
    margin: 50px auto 0;
}

.global-shutter-wrap figure {
    margin: 0 auto;
}

.global-shutter-wrap__text_l,
.global-shutter-wrap__text_r {
    padding: 0 10px;
    margin: 0;
}

.global-shutter-wrap__text_l,
.global-shutter-wrap__text_l h3 {
    text-align: right;
    display: inline-block;
}

.global-shutter-wrap__text_l h3 {
    margin-bottom: 0;
}

.global-shutter-wrap__text_r,
.global-shutter-wrap__text_r h3 {
    text-align: left;
    display: inline-block;
}

.global-shutter-wrap__text_r h3 {
    margin-bottom: 0;
}

.pc-display-none {
    display: none !important;
}

.sp-display-none {
    display: block;
}
/* 左から */

.fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeLeftAnime{
      from {
        opacity: 0;
      transform: translateX(-100px);
      }
    
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
/* .fadeLeftTrigger{
    opacity: 0;
} */
    
    /* 右から */
    
    .fadeRight{
    animation-name:fadeRightAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeRightAnime{
      from {
        opacity: 0;
      transform: translateX(100px);
      }
    
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }

    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
/* .fadeRightTrigger{
    opacity: 0;
} */

@media screen and (max-width: 600px) {
    .global-shutter-wrap {
        display: block;
    }

    .pc-display-none {
        display: block;
        width: 75%;
    }

    .sp-display-none {
        display: none !important;
    }

    .global-shutter-wrap__text_l,
    .global-shutter-wrap__text_l h3,
    .global-shutter-wrap__text_r,
    .global-shutter-wrap__text_r h3 {
        text-align: left;
    }

    .global-shutter-wrap__text_r h3 {
        padding-left: 15px;
        padding-right: 0;
        margin-bottom: 0;
    }

    .global-shutter-wrap__text_l h3 {
        padding-left: 30px;
        padding-right: 0;
        margin-bottom: 0;
    }

    .global-shutter-wrap__text_l {
        margin-bottom: 0;
    }

    .global-shutter-wrap__text_r {
        margin-top: 0;
    }


}


/* -------- specifications -------- */
.komodox__spec-grp {
    max-width: 1200px;
    margin: 30px auto 0;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 2fr;
    text-align: center;
    align-items: center;
}

.komodox__spec-grp dl {
    display: flex;
    flex-wrap: wrap;
    margin: 40px auto 0;
    width: 100%;
}

.under-line dl {
    border-bottom: 1px solid #fff;
    padding: 0 0 20px 0;
}

.komodox__spec-table {
    width: 25%;
}

.komodox__spec-grp dt,
.komodox__spec-grp dd {
    margin: 0 auto;
}

.komodox__spec-grp dd {
    align-items: center;
    height: 110px;
    display: grid;
}

.komodox__spec-grp dt {
    font-weight: bold;
    padding: 15px 0 10px;
}

.specifications-sp {
    display: none;
}

.spec-grp__figure-wrap figure {
    width: 65%;
    margin: 0 auto;
}
.spec-grp__figure-wrap figure img:hover {
    filter: drop-shadow(0 0 12px #777);
}

@media screen and (max-width: 1200px) {
    .komodox__spec-grp dd {
        height: 130px;
    }
}

@media screen and (max-width: 1000px) {
    .komodox__spec-table {
        width: 31%;
    }

    .komodox__spec-grp dd {
        height: 110px;
        line-height: 1.2;
    }
}

@media screen and (max-width: 700px) {
    .komodox__spec-table {
        width: 47%;
    }

    .komodox__spec-grp dd {
        height: 85px;
    }
}

@media screen and (max-width: 600px) {
    .specifications {
        display: none;
    }

    .specifications-sp {
        display: block;
    }

    .specifications-sp dl {
        margin: 30px auto 0;
        color: #fff;
        text-align: center;
            
    }

    .komodox__spec-table {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 5px 0 5px;
        border-bottom: 1px solid #6e6e6e;
    }

    .komodox__spec-table dt {
        align-items: center;
        display: grid;
    }

    .komodox__spec-table dd {
        margin: 0 auto;
        align-items: center;
        display: grid;
        
    }

    .under-line dl {
        padding-bottom: 60px;
    }

    .spec-grp__figure-wrap figure {
        margin: 10px auto;
        padding: 0 5px;
    }

    .pc-display-none {
        display: block !important;
    }
}

/* -------- accessories -------- */
.accessories__flexbox figure {
    width: 100%;
    margin: 0 auto;
}

.accessories__flexbox {
    flex-wrap: wrap;
}

.accessories__flexbox li {
    width: 21%;
    list-style-type: none;
}

.accessories__flexbox h3 {
    font-size: 1em;
    text-align: center;
}

@media screen and (max-width: 1200px) {
    .accessories__flexbox li {
        padding: 10px;
    }
}

@media screen and (max-width: 600px) {
    .accessories__flexbox figure {
        height: auto;
    }

    .accessories__flexbox li {
        width: 39%;
        list-style-type: none;
    }

    .btnshine {
        padding: 0;
    }
}